<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子组件传参的生命周期</title>
</head>
<body>
<div id="container">

</div>
</body>
</html>


<!--引入react核心库-->
<script type="text/javascript" src="../Js/react.development.js"></script>
<!--引入react-dom库,用于支持react操作dom-->
<script type="text/javascript" src="../Js/react-dom.development.js"></script>
<!--引入babel库,用于将jsx转成js-->
<script type="text/javascript" src="../Js/babel.min.js"></script>
<!--引入prop-types库,用于将对props进行类型限制-->
<script type="text/javascript" src="../Js/prop-types.js"></script>

<script type="text/babel">//此处一定要写text/babel，将jsx转成js

class A extends React.Component{

    state={
        car:'奔驰'
    }

    changeCar=()=>{
        this.setState({
            car:'大众'
        })
    }


    render(){
        return(
            <div>
                <p>我是A组件</p>
                <button onClick={this.changeCar}>给B换车</button>
                <B car={this.state.car}/>
            </div>
        )
    }
}

class B extends React.Component{

    // 组件将要接收新的props前的生命周期（第一次接收不会调用）
    componentWillReceiveProps(){
        console.log("B---componentWillReceiveProps")
    }

    shouldComponentUpdate(){
        console.log("B---shouldComponentUpdate")
        return true
    }

    componentWillUpdate(){
        console.log("B---componentWillUpdate")
    }

    componentDidUpdate(){
        console.log("B---componentDidUpdate")
    }

    render(){
        return(
            <div>
                <p>我是B组件</p>
                <p>我的车是{this.props.car}</p>
            </div>
        )
    }
}

ReactDOM.render(<A/>,document.getElementById("container"))


</script>